<template>
  <div class="tabbar">
    <ul>
        <li v-for="(item,index) in routerlist" :key="index" @click="switchTab(item.path)">
            <img :src="$route.path.includes(item.path) ? item.selected : item.active" alt="" >
            <!-- <img :src="$route.path.includes(item.path) ? item.selected : item.active" alt=""> -->
            <span :class="$route.path.includes(item.path) ? 'active' : ''">{{item.title}}</span>
        </li>
        
    </ul>
  </div>
</template>

<script>
export default {
    name:"Tabbar",
    data(){
        return{
            routerlist:[
                {
					title:'首页',
					path:'/home',
					active:'/images/home.png',
					selected:'/images/home-select.png',
				},
				{
					title:'分类',
					path:'/list',
					active:'/images/list.png',
					selected:'/images/list-select.png',
				},
				{
					title:'购物车',
					path:'/cart',
					active:'/images/cart.png',
					selected:'/images/cart-select.png',
				},
				{
					title:'我的',
					path:'/my',
					active:'/images/my.png',
					selected:'/images/my-select.png',
				}
            ]
        }
    },
    methods:{
        switchTab(path){
            //判断跳转是否为同一个路由
            if(this.$route.path==path) return
            //跳转到对应路由
            this.$router.replace(path)
        }
    }
}
</script>

<style lang="less" scoped>
    .tabbar{
        position: fixed;
        left: 0;
        bottom: 0;
        z-index:999;
        width: 100%;
        height: 1.6rem;
        background-color: #fff;
    }
    .tabbar ul{
        display: flex;
        justify-content: space-around;
        align-items: center;    
        width: 100%;
        height: 100%;
       
    }
    .tabbar ul li{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .tabbar ul li img{
        width: 0.78rem;;
        height: 0.78rem;;
    } 
    .tabbar ul li span{
        text-align: center;
        font-size: 0.426rem;
    }
    .active{
        color: red;
    }
</style>